<!--
 * @Description: 实时监测
 * @Author: charles
 * @Date: 2021-12-14 22:13:44
 * @LastEditors: HeAo
 * @LastEditTime: 2021-12-21 16:11:06
-->
<template>
  <div>
    <div class="container">
      <div class="left">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText">
           </el-input>
        <el-tree
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
        ></el-tree>
      </div>
      <div class="right">
       
        <el-tabs v-model="activeName" @tab-click="handleTabClick">
          <el-tab-pane label="tsp" name="tsp"></el-tab-pane>
          <el-tab-pane label="pm10" name="pm10"></el-tab-pane>
          <el-tab-pane label="pm2.5" name="pm25"></el-tab-pane>
          <el-tab-pane label="温度" name="temperature"></el-tab-pane>
          <el-tab-pane label="湿度" name="humidity"></el-tab-pane>
        </el-tabs>
        
        <div ref="chartContainer" style="height: 300px"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { get } from "@/utils/request";
import { Area } from "@antv/g2plot";
import moment from "moment";
export default {
  data() {
    return {
      data: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      activeName: "tsp",
      monitor: [],
      plot: null,
    };
  },
  computed: {
    chartData() {
      return this.monitor.map((item) => {
        return {
          Date: moment(item.insert_time).format("MM-DD hh:mm"),
          [this.activeName]: parseInt(item[this.activeName]),
        };
      });
    },
  },
  methods: {
    // 树形节点点击事件
    handleNodeClick(node) {
      if (this.plot) {
        this.plot.destroy();
      }
      if (node.engineer_id) {
        // 重组参数
        const params = {
          page: 1,
          pageSize: 50,
          engineer_id: node.engineer_id,
          device_id: node.id,
        };
        // 请求实时数据
        get("/monitor/pageQuery", params).then((res) => {
          this.monitor = res.data.list;
          // 初始化图表
          this.initChart();
        });
      }
    },
    // 查询工程设备树
    findEngineerDeviceTree() {
      get("/engineer/findEngineerDeviceTree").then((res) => {
        this.data = res.data;
      });
    },
    // tab点击函数
    handleTabClick() {
      this.plot.update({
        data: this.chartData,
        yField: this.activeName,
      });
    },
    // 初始化图表
    initChart() {
      this.plot = new Area(this.$refs["chartContainer"], {
        data: this.chartData,
        xField: "Date",
        yField: this.activeName,
        yAxis: {
          grid: {
            line: {
              // 设置辅助线样式
              style: {
                lineDash: [2, 0], // 虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。
                strokeOpacity: 0.5, // 辅助线透明度
              },
            },
          },
        },
        areaStyle: () => {
          return {
            fill: "l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff",
          };
        },
      });
      this.plot.render();
    },
  },
  created() {
    // 工程设备树方法的调用
    this.findEngineerDeviceTree();
  },
};
</script>
<style scoped>
.container {
  display: flex;
  height: 100%;
}
.left {
  width: 250px;
  height: 100%;
  border-right: 1px solid #ededed;
}
.right {
  flex: 1;
  height: 100%;
  padding-left: 1em;
}
</style>